<div class="wrapper wrapper-content animated fadeIn" id="toastr" name="提示框插件">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>toastr</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:void(0)">选项1</a>
                            </li>
                            <li><a href="javascript:void(0)">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="alert alert-warning">
                        官方文档及更多示例请参考：
                        <a href="https://github.com/CodeSeven/toastr" target="_blank">https://github.com/CodeSeven/toastr</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Toastr示例</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#">设置选项1</a>
                            </li>
                            <li>
                                <a href="#">设置选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="title">标题</label>
                                <input id="title" type="text" class="form-control" placeholder="请输入标题...">
                            </div>
                            <div class="form-group">
                                <label for="message">消息</label>
                                <textarea class="form-control" id="message" rows="3" placeholder="请输入消息..."></textarea>
                            </div>
                            <div class="checkbox">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini" checked="">关闭按钮
                            
                                </label>
                            </div>
                            <div class="checkbox">
                                <label class="checkbox" for="addBehaviorOnToastClick">
                                    <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini">添加Toast单击行为
                            
                                </label>
                            </div>
                            <div class="checkbox">
                                <label class="checkbox" for="debugInfo">
                                    <input id="debugInfo" type="checkbox" value="checked" class="input-mini">Debug
                            
                                </label>
                            </div>
                            <div class="checkbox">
                                <label class="checkbox" for="progressBar">
                                    <input id="progressBar" type="checkbox" value="checked" class="input-mini" checked="">进度条
                            
                                </label>
                            </div>
                            <div class="checkbox">
                                <label class="checkbox" for="preventDuplicates">
                                    <input id="preventDuplicates" type="checkbox" value="checked" class="input-mini">防止重复
                            
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" id="toastTypeGroup">
                                <label>Toast类型</label>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="toasts" value="success" checked="">成功
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label class="radio">
                                        <input type="radio" name="toasts" value="info">信息
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label class="radio">
                                        <input type="radio" name="toasts" value="warning">警告
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label class="radio">
                                        <input type="radio" name="toasts" value="error">错误
                                
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" id="positionGroup">
                                <label>Position</label>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-top-right" checked="">右上
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-bottom-right">右下
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-bottom-left">左下
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-top-left">左上
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-top-full-width">顶部全宽
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-bottom-full-width">底部全宽
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-top-center">顶部居中
                                
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="positions" value="toast-bottom-center">底部居中
                                
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="showEasing">显示动画</label>
                                <input id="showEasing" type="text" placeholder="swing, linear" class="form-control" value="swing">
                            </div>
                            <div class="form-group">
                                <label for="hideEasing">隐藏动画</label>
                                <input id="hideEasing" type="text" placeholder="swing, linear" class="form-control" value="linear">
                            </div>
                            <div class="form-group">
                                <label for="showMethod">显示方法</label>
                                <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="form-control" value="fadeIn">
                            </div>
                            <div class="form-group">
                                <label for="hideMethod">隐藏方法</label>
                                <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="form-control" value="fadeOut">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="showDuration">显示持续时间</label>
                                <input id="showDuration" type="text" placeholder="ms" class="form-control" value="400">
                            </div>
                            <div class="form-group">
                                <label for="hideDuration">隐藏持续时间</label>
                                <input id="hideDuration" type="text" placeholder="ms" class="form-control" value="1000">
                            </div>
                            <div class="form-group">
                                <label for="timeOut">超时</label>
                                <input id="timeOut" type="text" placeholder="ms" class="form-control" value="7000">
                            </div>
                            <div class="form-group">
                                <label for="extendedTimeOut">延长时间</label>
                                <input id="extendedTimeOut" type="text" placeholder="ms" class="form-control" value="1000">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <button type="button" class="btn btn-primary" id="showtoast">显示Toast</button>
                            <button type="button" class="btn btn-white" id="cleartoasts">清除所有Toast</button>
                            <button type="button" class="btn btn-white" id="clearlasttoast">清除最后一个Toast</button>
                            <button type="button" class="btn btn-white" id="showsimple">显示简单设置</button>
                        </div>
                    </div>
                    <div class="row m-t-lg">
                        <div class="col-lg-12">
                            <small>Toastr JSON设置</small>
                            <pre id="toastrOptions" class="p-m">Command: toastr[success]("Hi, welcome to hplus. This is example of Toastr notification box.")
toastr.options = {
    "closeButton": true,
    "debug": true,
    "progressBar": false,
    "positionClass": "toast-top-right",
    "showDuration": "400",
    "hideDuration": "1000",
    "timeOut": "7000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>